<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Registration</title>
</head>
<body>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">User Registration</h4>
                </div>
                <div class="card-body">
                    <!-- 表单提交到/register处理 -->
                    <form th:action="@{/register}" method="post" th:object="${user}">
                        <!-- 用户名输入框 -->
                        <div class="mb-3">
                            <label for="name" class="form-label">Display Name</label>
                            <input type="text" class="form-control" id="name"
                                   th:field="*{name}" required>
                            <!-- 显示用户名验证错误 -->
                            <span th:if="${#fields.hasErrors('name')}"
                                  th:errors="*{name}" class="text-danger"></span>
                        </div>

                        <!-- 密码输入框 -->
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" class="form-control" id="password"
                                   th:field="*{password}" required>
                            <!-- 显示密码验证错误 -->
                            <span th:if="${#fields.hasErrors('password')}"
                                  th:errors="*{password}" class="text-danger"></span>
                        </div>


                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary w-100">注册</button>
                    </form>

                    <!-- 显示全局错误信息 -->
                    <div th:if="${errorMessage != null}" class="alert alert-danger mt-3" role="alert">
                        <span th:text="${errorMessage}"></span>
                    </div>

                    <!-- 已有账号登录链接 -->
                    <div class="mt-3 text-center">
                        Already have a account? <a th:href="@{/login}" class="text-decoration-none">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
